<template>
    <!-- 水墨动画层，控制显示/隐藏和动画状态 -->
    <div
        class="cd-transition-layer"
        :class="{
            visible: visible,
            opening: opening,
            closing: closing,
        }"
        v-if="visible || opening || closing"
    >
        <div class="bg-layer"></div>
    </div>
</template>

<script>
export default {
    name: "InkSplash",
    props: {
        duration: {
            type: Number,
            default: 2000, // 动画时长，单位毫秒
        },
    },
    data() {
        return {
            visible: true, // 是否显示动画层
            opening: true, // 是否处于开场动画
            closing: false, // 是否处于关闭动画
        };
    },
    mounted() {
        // 开场动画播放 duration 毫秒后，开始关闭动画
        setTimeout(() => {
            this.opening = false;
            this.closing = true;
            // 关闭动画再持续 1 秒后，彻底隐藏
            setTimeout(() => {
                this.visible = false;
                this.closing = false;
                // 可在此处通过事件通知父组件动画结束
                this.$emit("finished");
            }, 2000);
        }, this.duration);
    },
};
</script>

<style scoped>
/* 水墨动画层样式 */
.cd-transition-layer {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    height: 100%;
    width: 100%;
    background-color: rgb(148, 148, 148);
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: opacity 0.3s;
}
.cd-transition-layer.visible {
    opacity: 1;
    visibility: visible;
}
.cd-transition-layer .bg-layer {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateY(-50%) translateX(-2%);
    height: 100%;
    width: 2500%;
    background: url("/ink.png") no-repeat 0 0;
    background-size: 100% 100%;
}
.cd-transition-layer.opening .bg-layer {
    animation: cd-sequence 1s steps(24);
    animation-fill-mode: forwards;
}
.cd-transition-layer.closing .bg-layer {
    animation: cd-sequence-reverse 1s steps(24);
    animation-fill-mode: forwards;
}
@keyframes cd-sequence {
    0% {
        transform: translateY(-50%) translateX(-2%);
    }
    100% {
        transform: translateY(-50%) translateX(-98%);
    }
}
@keyframes cd-sequence-reverse {
    0% {
        transform: translateY(-50%) translateX(-98%);
    }
    100% {
        transform: translateY(-50%) translateX(-2%);
    }
}
</style>